<template>
  <div>
    <el-button type="primary" size="small"  @click="addWare">
      新增仓库
    </el-button>
    <el-table
      stripe
      border
      :data="wareData"
      style="width: 100%;margin-top: 15px"
      ref = 'wareTable'
      @selection-change="handlerSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="wareid"
        label="仓库编号">
      </el-table-column>
      <el-table-column
        prop="warename"
        label="仓库名称">
      </el-table-column>
      <el-table-column
        prop="position"
        label="仓库地点">
      </el-table-column>
      <el-table-column
        prop="size"
        label="仓库大小">
      </el-table-column>
      <el-table-column
       prop="price"
       label="仓库价格">
      </el-table-column>
      <el-table-column
        prop="status"
        label="仓库状态"
        :filters="[{ text: '已租', value: '已租' }, { text: '未租', value: '未租' }]"
        :filter-method="filterTag">
        <template v-slot="scope">
          <el-tag
            :type="scope.row.status === '已租' ? 'success':'primary' "
            disable-transitions>
            {{ scope.row.status}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="edate"
        label="到期时间" v-if="this.wareData.status==='已租'">
      </el-table-column>
      <el-table-column
        prop="options"
        label="操作"
        width="150">
        <template v-slot="scope">
          <el-button
            size="mini"
            @click="deleteOne(scope.$index,scope.row)">
            删除
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="change(scope.$index,scope.row)">
            修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="wareData.length">
      </el-pagination>
    </div>
    <el-button size="small" style="margin-top: 10px"
               type="primary"
               @click = "deleteMany"
               :disabled="this.selectItems.length===0">
      批量删除
    </el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="wareForm" ref="wareForm" label-width="80px" :rules="rules">
        <el-form-item label="仓库名称" prop="warename">
          <el-input v-model="wareForm.warename" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库地点" prop="position">
          <el-input v-model="wareForm.position" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库大小" prop="size">
          <el-input v-model="wareForm.size" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库价格" prop="price">
          <el-input v-model="wareForm.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="仓库状态" prop="status">
          <el-radio v-model="wareForm.status" label="已租">已租</el-radio>
          <el-radio v-model="wareForm.status" label="未租">未租</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "adminWarehouse",
  data(){
    return{
      //user: JSON.parse(window.sessionStorage.getItem("user"))
      wareData: [{
        wareid:'1',
        warename:'西南一仓',
        position:'西南',
        size:1000,
        price:'10000',
        status:'已租',
        edate:'到期时间'
      },{
        wareid:'2',
        warename:'西南二仓',
        position:'西南',
        size:5000,
        price:'10000',
        status:'已租',
        edate:'到期时间'
      },
        {
          wareid:'3',
          warename:'西南三仓',
          position:'西南',
          size:10000,
          price:'10000',
          status:'已租',
          edate:'到期时间'
        }
      ],
      selectItems:[],
      dialogFormVisible: false,
      wareForm: {},
      rowIndex:null,
      dialogTitle: '',
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      rules:{
        warename:[{required: true,message:'请输入仓库名称',trigger:'blur'}],
        position:[{required: true,message:'请输入仓库位置',trigger:'blur'}],
        size:[{required: true,message:'请输入仓库大小',type:'float',trigger:'blur'}],
        price:[{required: true,message:'请输入仓库价格',trigger:'blur'}],
        status:[{required: true,message:'请选择仓库状态',trigger:'blur'}],
      }
    }
  },
  /*
    mounted(){
     this.initWare;
     this.initWareData;
    },
  * */

  methods:
    {
      initWareData(){
        this.getRequest('/获取所有仓库信息').then(res=>{
          if(res)
          {
            //this.wareData = res
          }
        })
      },
      filterTag(value, row) {
        return row.status === value;
      },
      addWare(){
        this.dialogTitle = '新增仓库';
        this.userForm = {};
        this.dialogFormVisible = true;
      },
      deleteOne(index,row){
        this.$confirm('此操作将永久删除仓库, 是否执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发送删除请求,传递用户id，仓库id
          let data = {
            userid:'user.id',
            wareid:'warehouse.id'}
          /*this.putRequest('/仓库商品上架请求',data).then(res=>{
          if(res)
          { }
        })
          * */
          this.wareData.splice(index,1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      change(index,row)
      {
        this.dialogTitle ='修改仓库信息';
        // 将数据的index传递过来用于实现数据的回显
        this.wareForm = row;
        // 设置对话框的可见
        this.dialogFormVisible = true;
        this.rowIndex=index;

      },
      handlerSelectionChange(val){
        this.selectItems = val;
        console.log(val);
      },
      // 弹窗肯定
      submit() {
        this.$refs.wareForm.validate((valid)=>
        {
          if(valid)
          {
            if (this.dialogTitle === '修改仓库信息') {
              this.wareData.splice(this.rowIndex,1, this.wareForm);
              this.dialogFormVisible = false;
              return;
            }
            this.wareData.splice(0, 0, this.wareForm);
            this.dialogFormVisible = false;
          }else
          {
            this.$message.error('请按要求输入数据');
            return false;
          }
        })

      },
      deleteMany()
      {
        this.$confirm('确认批量删除?', '批量删除操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          //发送批量上架请求,传递用户id，仓库id，商品批量id
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          this.$message({
            type: 'success',
            message: '批量删除成功!'
          });
          //每次选择后清空
          this.$refs.wareTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageParams.pageNum = 1;
        this.pageParams.pageSize = val;
      },

      handleCurrentChange(val) {
        this.pageParams.pageNum = val;
      }
}}
</script>

<style scoped>

</style>
